<template>
    <div class="classification">
        <van-search v-model="value" placeholder="请输入搜索关键词" @search="filterData" />
        <van-tabs @click-tab="onClickTab">
            <van-tab v-for="item in titles" :key="item" :title="item">
                <van-cell-group>
                    <van-cell 
                        is-link 
                        v-for="project in fundraisingProjects" 
                        :key="String(project.fundraisingProjectsId)"  
                        :to="'/projectDetail/' + project.fundraisingProjectsId"
                    >
                        <template #title>
                            <div class="project-name">
                                <img :src="imageUrl + project.fundraisingProjectsPhoto" width="100px" height="50px" />
                                <div class="project-info">
                                    <span style="font-weight:bold;">{{ project.fundraisingProjectsName }}</span>
                                    <span style="font-size: smaller;">{{ project.fundraisingProjectsIntroduction }}</span>
                                </div>
                            </div>
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { donatorApi } from '../../api/app';
import { IFundraisingProject } from './ts/commen';
import { imageUrl } from '../../api/request';

/** 输入关键词 */
const value = ref('');
/** 当前分类 */
const currentTitle = ref('教育助学');
/** 分类标题 */
const titles = ['教育助学', '扶危助困', '乡村振兴', '生态人文'];
/** 募捐项目 */
const fundraisingProjects = ref<IFundraisingProject[]>([]);

onMounted(() => {
    filterData();
})

/** 根据类别 & 关键字筛选数据 */
const filterData = () => {
    donatorApi.getFundraisingProjectsByType({
        keyword: value.value,
        fundraisingProjectsType: currentTitle.value
    }).then((res: any) => {
        if (res) {
            fundraisingProjects.value = res;
        }
    })
}

/** 点击标签 */
const onClickTab = ({ title }) => {
    currentTitle.value = title;
    filterData();
}
</script>

<style scoped lang="less">
.classification {
    height: 100vh;
    width: 100vw;
    background-color: #e1ecfe69;

    .project-name {
        display: flex;
        align-items: center;
    }

    .project-info {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }
}
</style>